<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="login">
{
  isPadding: false,
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '登录',
  },
}
</route>
<template>
  <view class="home_container">
    <text class="title">{{ t('login.loginTitle') }}</text>
    <img src="../../static/images/ic_app_logo.png" />
    <wd-form ref="form" :model="model" class="login_form">
      <wd-cell-group class="ipt_group">
        <wd-input
          :label="t('login.Phone')"
          label-width="100px"
          prop="value1"
          v-model="model.value1"
          :placeholder="t('login.loginPhone')"
          :rules="[{ required: true, message: t('login.loginPhone') }]"
        />

        <wd-input
          :label="t('login.Password')"
          label-width="100px"
          prop="value2"
          v-model="model.value2"
          :placeholder="t('login.loginPassword')"
          :rules="[{ required: true, message: t('login.loginPassword') }]"
        />
      </wd-cell-group>

      <scroll-view scroll-x></scroll-view>
      <view class="footer">
        <button @click="handleSubmit">{{ t('login.login') }}</button>
        <text>{{ t('login.fotgetPw') }}</text>
      </view>
    </wd-form>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useI18n } from 'vue-i18n'
import { useToast } from 'wot-design-uni'
const { t } = useI18n()
// import PLATFORM from '@/utils/platform'

defineOptions({
  name: 'Login',
})

// 获取屏幕边界到安全区域距离
// const { safeAreaInsets } = uni.getSystemInfoSync()

// 测试 uni API 自动引入
// onload(() => {})
// 表单
const { success: showSuccess } = useToast()

const model = reactive<{
  value1: string
  value2: string
}>({
  value1: '',
  value2: '',
})

const form = ref()

function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        showSuccess({
          msg: '校验通过',
        })
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
</script>

<style lang="scss" scoped>
.home_container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 100vh;
  padding-top: 42rpx;
  overflow: hidden;
  // background-color: #f3f3f3;
  .title {
    font-size: 36rpx;
    font-weight: 700;
    color: #000;
  }
  img {
    width: 188rpx;
    margin-top: 90rpx;
  }
  .login_form {
    margin-top: 30rpx;
    .ipt_group {
      width: 75vw;
      .wd-input.is-cell {
        display: block;
        padding-right: 0;
        padding-bottom: 0;
        padding-left: 0;
        border-bottom: 2rpx solid #c9c9c9;
        ::v-deep .wd-input__label.is-required {
          padding-left: 0;
          color: #787878;
          &::after {
            display: none;
          }
        }
        ::v-deep .uni-input-placeholder {
          font-size: 24rpx;
        }
      }
    }
    .footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 30rpx;
      margin-top: 170rpx;
      font-size: 22rpx;
      color: #808080;
      button {
        width: 100%;
        height: 70rpx;
        margin-bottom: 50rpx;
        font-size: 28rpx;
        line-height: 70rpx;
        color: #fff;
        background-color: #3a80e2;
        border: none;
      }
    }
  }
}
</style>
